<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div>
    <group label-width="22vw">
      <x-input placeholder="手机号/用户名" v-model="userName" type="text"></x-input>
      <x-input placeholder="密码" v-model="password" type="password"></x-input>
      <x-input class="weui-cell_vcode" v-model="code">
        <img slot="right" class="weui-vcode-img" v-on:click="restCode" :src="codeImg">
      </x-input>
    </group>

    <x-button class="from_submit" type="primary" action-type="button" @click.native="login">提交</x-button>
    <toast text="Hello World"></toast>
  </div>
</template>

<script>
  import Group from 'vux/src/components/group/index'
  import XInput from 'vux/src/components/x-input/index'
  import XButton from 'vux/src/components/x-button/index'
  import Toast from 'vux/src/components/toast/index'

  export default {
    components: {
      Group,
      XInput,
      XButton,
      Toast
    },
    methods: {
      restCode () {
        let codeUrl = 'https://ydt.xy12345.cn/edot/imageServlet?t='
        let codeTime = new Date().getTime()
        this.codeImg = codeUrl + codeTime
      },
      login () {
        let url = 'https://ydt.xy12345.cn/edot/system/user/login'
        let param = {
          userName: this.userName,
          password: this.password,
          code: this.code
        }
        this.$axios.post(url, this.$qs.stringify(param)).then(response => {
          let code = response.data.code
          if (code === 0) {
            // 将登陆信息存储到localStorage
            localStorage.user = JSON.stringify(response.data.data.user)
            console.log('登录成功')
          }
        })
      }
    },
    mounted () {
      this.restCode()
    },
    data () {
      return {
        userName: '',
        password: '',
        code: '',
        codeImg: ''
      }
    }
  }
</script>

<style scoped>
  .from_submit {
    width: 90vw;
    margin: 5vw auto;
  }
</style>
